<template>
  <view class="page-body">
    <!-- 页面内容开始 -->

    <!-- 表格搜索组件开始 -->
    <vk-data-table-query
      v-model="queryForm1.formData"
      :columns="queryForm1.columns"
      size="mini"
      @search="search"
    ></vk-data-table-query>
    <!-- 表格搜索组件结束 -->

    <!-- 自定义按钮区域开始 -->
    <view>
      <el-row> </el-row>
    </view>
    <!-- 自定义按钮区域结束 -->

    <!-- 表格组件开始 -->
    <vk-data-table
      ref="table1"
      :rowNo="true"
      :border="true"
      :action="table1.action"
      :columns="table1.columns"
      :query-form-param="queryForm1"
      :custom-right-btns="table1.customRightBtns"
      size="mini"
      @current-change="currentChange"
    ></vk-data-table>
    <!-- 表格组件结束 -->
    <vk-data-dialog
      v-model="detailshow"
      title="样品查询"
      width="1150px"
      mode="form"
      :close-on-click-modal="true"
      style="padding: 20px"
    >
      <vk-data-table
        ref="table2"
        :rowNo="true"
        :border="true"
        :action="table2.action"
        size="mini"
        :columns="table2.columns"
        style="margin: 20px"
        :pagination="true"
        :auto-action="false"
        :query-form-param="queryForm2"
        @current-change="currentChange"
      ></vk-data-table>
    </vk-data-dialog>
    <!-- 页面内容结束 -->
  </view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据

export default {
  data() {
    // 页面数据变量
    return {
      // 页面是否请求中或加载中
      loading: false,
      detailshow: false,
      // init请求返回的数据
      data: {},
      // 表格相关开始 -----------------------------------------------------------
      table1: {
        // 表格数据请求地址
        action: "admin/testing/comprehensive-query/sys/groupqueryby_user",
        // 表格字段显示规则
        columns: [
          // { key:"_id", title:"id", type:"text", width:220 },

          { key: "detection_user", title: "检测人", type: "text", width: 500 },
          { key: "count", title: "检测样品数量", type: "number", width: 200 },
          { key: "price", title: "检测总费用", type: "number", width: 200 },
        ],
        // 多选框选中的值
        multipleSelection: [],
        // 当前高亮的记录
        selectItem: "",
        customRightBtns: [
          {
            title: "详情",
            type: "primary",

            onClick: (item) => {
              that.detailshow = true;
              // that.queryForm2.formData.
              that.$nextTick(async () => {
                that.queryForm2.formData = {
                  detection_category: item.samplename,
                  ...that.queryForm1.formData,
                };
                that.$refs.table2.search();
              });
            },
          },
        ],
      },
      table2: {
        // 表格数据请求地址
        action: "admin/testing/comprehensive-query/sys/groupquery_detail",
        // 表格字段显示规则
        columns: [
          // { key:"_id", title:"id", type:"text", width:220 },

          { key: "sampleno", title: "no.", type: "text", width: 100 },
          { key: "detection_category", title: "检测项目名称", type: "text", width: 180 },

          {
            key: "detection_form.client_name",
            title: "送检单位",
            type: "text",
            width: 250,
          },
          { key: "samplename", title: "样品名称", type: "text", width: 150 },
          { key: "unit", title: "单位", type: "text", width: 150 },
          { key: "client_info.cate_price.price", title: "价格", type: "text", width: 80 },
          {
            key: "_add_time",
            title: "录入时间",
            type: "time",
            width: 160,
            valueFormat: "MM月dd日 ",
            width: 80,
          },
        ],
        // 多选框选中的值
        multipleSelection: [],
        // 当前高亮的记录
        selectItem: "",
      },
      // 表格相关结束 -----------------------------------------------------------
      // 表单相关开始 -----------------------------------------------------------
      // 查询表单请求数据
      queryForm1: {
        // 查询表单数据源，可在此设置默认值
        formData: {},
        // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
        columns: [
          //   {
          //     key: "client",
          //     title: "委托单位/人",
          //     type: "remote-select",
          //     placeholder: "请选择委托单位/人",
          //     filterable: true,
          //     action: "admin/base/client/sys/getalllist",
          //     props: { list: "rows", value: "_id", label: "name" },

          //     showAll: true,
          //     actionData: {
          //       pageSize: -1,
          //     },
          //     width: 200,
          //   },
          {
            key: "_add_time",
            title: "填单时间",
            type: "datetimerange",
            width: 380,
            mode: "[]",
          },
        ],
      },
      queryForm2: {
        // 查询表单数据源，可在此设置默认值
        formData: {},
        // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
        columns: [
          {
            key: "detection_category",
            title: "项目名称",
            type: "datetimerange",
            width: 380,
            mode: "=",
          },
          {
            key: "_add_time",
            title: "填单时间",
            type: "datetimerange",
            width: 380,
            mode: "[]",
          },
        ],
      },
      form1: {
        // 表单请求数据，此处可以设置默认值
        data: {},
        // 表单属性
        props: {
          // 表单请求地址
          action: "",
          // 表单字段显示规则
          columns: [
            {
              key: "samplename",
              title: "商品名称",
              type: "text",
              placeholder: "请输入商品规格名称",
              width: 300,
            },
            {
              key: "count",
              title: "数量",
              type: "number",
              placeholder: "请输入排序权重",
              width: 200,
            },
            // {
            // 	key: "is_on", title: "是否启用", width: 80, type: "switch", width: 120, activeValue: true, inactiveValue: false,
            // }
          ],
          // 表单验证规则
          rules: {
            name: [
              // 必填
              {
                required: true,
                message: "商品规格名称不能为空",
                trigger: ["blur", "change"],
              },
            ],
            // sort: [
            // 	// 必填
            // 	{ required: true, message: "排序不能为空", trigger: ['blur', 'change'] }
            // ],
          },
          // add 代表添加 update 代表修改
          formType: "",
          // 是否显示表单的弹窗
          show: false,
        },
      },
      // 其他弹窗表单
      formDatas: {},
      // 表单相关结束 -----------------------------------------------------------
    };
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options = {}) {
    that = this;
    vk = that.vk;
    that.options = options;
    let { weekStart, weekEnd } = vk.pubfn.getCommonTime(new Date());
    this.queryForm1.formData._add_time = [weekStart, weekEnd];
    that.init(options);
  },
  onUnload() {
    // 返回false阻止页面被销毁
    return false;
  },
  // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
  onShow() {},
  // 监听 - 页面每次【隐藏时】执行(如：返回)
  onHide() {},
  // 函数
  methods: {
    // 页面数据初始化函数
    init(options) {
      originalForms["form1"] = vk.pubfn.copyObject(that.form1);
    },
    // 页面跳转
    pageTo(path) {
      vk.navigateTo(path);
    },
    // 表单重置
    resetForm() {
      vk.pubfn.resetForm(originalForms, that);
    },
    // 搜索
    search() {
      that.$refs.table1.search();
    },
    // 刷新
    refresh() {
      that.$refs.table1.refresh();
    },
    // 获取当前选中的行的数据
    getCurrentRow() {
      return that.$refs.table1.getCurrentRow();
    },
    // 监听 - 行的选中高亮事件
    currentChange(val) {
      that.table1.selectItem = val;
    },
    // 当选择项发生变化时会触发该事件
    selectionChange(list) {
      that.table1.multipleSelection = list;
    },
  },
  // 监听属性
  watch: {},
  // 过滤器
  filters: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.page-body {
}
</style>
